<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap bg-F7F8FF">
			<view class="card bg-base">
				<view class="hd fboxRow Ycenter font28 color-main" @click="goPage(1)">
					<view class="flex1">智能语音介绍</view>
					<view class="switch" v-if="fromData.intelligenceVoiceText">
						<u-switch
							v-model="fromData.voiceType"
							inactiveColor="#E8EDF1"
							size="30"
							space="3"
							activeColor="#CC9870"
							activeValue="1"
							inactiveValue="0"
							@change="offChange"
						></u-switch>
					</view>
					<template v-else>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</view>
				<view class="bd">
					<view v-if="!fromData.intelligenceVoiceText" class="not fboxRow Ycenter flex1 color-969699 font28">暂无设置</view>
					<view v-else class="mt16 fboxRow Ycenter">
						<view class="flex1">{{ fromData.intelligenceVoiceText }}</view>
						<u-icon @click="delAudio(1)" color="#969699" name="trash"></u-icon>
						<!-- <AudioSlider :url="fromData.customVoiceUrl" /> -->
					</view>
				</view>
			</view>
			<view class="space"></view>
			<view class="card bg-base">
				<view class="hd fboxRow Ycenter font28 color-main" @click="goPage(2)">
					<view class="flex1">自定义语音介绍</view>
					<view class="switch fboxRow Ycenter Xend" v-if="fromData.customVoiceUrl">
						<u-switch
							v-model="fromData.voiceType"
							inactiveColor="#E8EDF1"
							size="30"
							space="3"
							activeColor="#CC9870"
							activeValue="2"
							inactiveValue="0"
							@change="offChange"
						></u-switch>
					</view>
					<template v-else>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</view>
				<view class="bd mt16">
					<view v-if="!fromData.customVoiceUrl" class="not flex1 color-969699 font28">暂无设置</view>
					<template v-else>
						<AudioSlider :url="fromData.customVoiceUrl" :innerData="fromData" voiceType="2" @del="delAudio" />
					</template>
				</view>
			</view>
		</view>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
	</view>
</template>
<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { strTrim } from '@/static/js/common.js';
import AudioSlider from './audio-slider.vue';
import { getCardVoice, cardVoiceUpdate, cardVoiceDel } from '@/api/card.js';
export default {
	components: {
		AudioSlider,
		BottomBtn
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			fromData: {
				// textAudio: 'https://ebc-prod.cdn.benwunet.com/4292c1d11dba4cae9c497f5857c992e4.mp3',
				// customVoiceUrl: 'https://ebc-prod.cdn.benwunet.com/9cc10880c77e46dab99c989dc300e6da.mp3',
				auditStatus: '',
				customVoiceUrl: '',
				intelligenceVoiceText: '',
				reason: '',
				voiceType: ''
			},
			cardId: ''
		};
	},
	onLoad(option) {
		if (option && option.cardId) {
			this.cardId = option.cardId;
			this.getVoice();
		}
	},
	onShow() {
		this.getVoice();
	},
	methods: {
		// 获取音频信息
		getVoice(data) {
			getCardVoice().then(res => {
				this.fromData = res.data;
				if (data && data.customVoiceUrl) {
					this.fromData.customVoiceUrl = data.customVoiceUrl;
				}
				if (data && data.intelligenceVoiceText) {
					this.fromData.intelligenceVoiceText = data.intelligenceVoiceText;
				}
			});
		},
		// 跳转页面
		goPage(num) {
			if (num == 1 && !this.fromData.intelligenceVoiceText) {
				this.$pageTo('/mine/edit/audioText');
			}
			if (num == 2 && !this.fromData.customVoiceUrl) {
				this.$pageTo('/mine/edit/audioCustom');
			}
		},
		// 语音开关
		offChange(e) {
			this.fromData.voiceType = e;
			cardVoiceUpdate({ voiceType: e }).then(res => {
				if (res.data) {
					
				}
			});
		},
		// 保存
		verifyTap() {
			uni.navigateBack();
		},
		// 删除语音接口
		delAudio(voiceType) {
			cardVoiceDel({
				cardId: this.cardId,
				voiceType: voiceType
			}).then(res => {
				if (res.data) {
					if (voiceType == 2) {
						this.fromData.customVoiceUrl = '';
					} else {
						this.fromData.intelligenceVoiceText = '';
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	height: calc(100vh);
	padding: 40rpx;
}
::v-deep .audio-item {
	// width: ;
}
::v-deep .u-switch__node {
	background-color: var(--contentFontFiveColor) !important;
}
::v-deep .u-switch__node--on {
	background-color: var(--viewBgColor) !important;
}
.bg-base {
	background-color: var(--viewBgColor);
	border-radius: 12rpx;
}
.card {
	padding: 30rpx 40rpx;
}
.card .hd {
	height: 40rpx;
}
.card .not {
	height: 60rpx;
}
.space {
	width: 100%;
	height: 20rpx;
}
.switch {
	transform: scale(0.7);
	margin-right: -20rpx;
}
.input-tips {
	padding: 15rpx 40rpx;
	line-height: 32rpx;
}
.icon {
	width: 34rpx;
	height: 36rpx;
}
</style>
